Developing an ionic Edge by Keith D. Moore Robin van Baalen Anton Shevchenko Diego Netto Alan Levicki Chris Marshall

Author:Keith D. Moore, Robin van Baalen, Anton Shevchenko, Diego Netto, Alan Levicki, Chris Marshall
Language: eng
Format: epub
Publisher: Bleeding Edge Press
Published: 2014-11-17T05:00:00+00:00

The future of AngularJS application routing

Please note that this book was written and the companion app Trendicity was built when AngularJS 1.3 was just recently released. For the future AngularJS 2.0, a new router is being developed that is also backported to AngularJS 1.3. Similar to Angular UI Router, the new router is also based on (nestable) states. However, it is up to Drifty to incorporate support for that router in Ionic.

Setting up the application routes

Aside from some one-time setup logic, the app.js file (which can be found in www/js/app.js) contains all of the application’s routing logic as well. This logic is defined using the aforementioned UI Router component and its $stateProvider and $urlRouterProvider providers.

First, let us take a look at the complete routing setup as it is used in Trendicity.

// ... app.js configuration code above .config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('app', { url: '/app', abstract: true, templateUrl: 'templates/menu.html', controller: 'AppCtrl' }) .state('app.intro', { url: '/intro', views: { 'menuContent': { templateUrl: 'templates/intro.html', controller: 'IntroCtrl' } } }) .state('app.favorites', { url: '/favorites', views: { 'menuContent': { templateUrl: 'templates/favorites.html', controller: 'FavoritesCtrl' } } }) .state('app.home', { url: '/home', abstract: true, views: { 'menuContent': { templateUrl: 'templates/home.html', controller: 'HomeCtrl' } } }) .state('app.home.map', { url: '/map/?latitude&longitude', views: { 'tab-map': { templateUrl: 'templates/tab-map.html', controller: 'MapViewCtrl as mapCtrl' } } }) .state('app.home.card', { url: '/card', views: { 'tab-card': { templateUrl: 'templates/tab-card.html', controller: 'CardViewCtrl' } } }) .state('app.home.list', { url: '/list', views: { 'tab-list': { templateUrl: 'templates/tab-list.html', controller: 'ListViewCtrl' } } }); // if none of the above states are matched, use this as the fallback $urlRouterProvider.otherwise('/app/home/map/'); }) // ... app.js continues here

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.